<template>
    <div class="select_class">
        <mt-index-list >
            <mt-index-section  v-for="(site,index) in siteData" :key="index" :index="site">
                <div class="main" v-for="(item,index) in showData" v-if="item.sortName==site"> 
                    <div class="flex">
                        <div class="head">
                            <img :src="item.studentPhoto" />
                        </div>
                        <div class="classroom">
                            <div class="className">{{item.studentName}}</div>
                            <div class="teacher">{{item.className}}</div>
                        </div>
                        
                    </div> 
                    <div class="right flex" >
                            <div class="teacher" style="color:#ccc;margin-right:0.1rem;" >未通知</div>
                            <mt-button type="primary" size="small" >发送通知</mt-button>
                        </div>                      
                    <!-- <div @click="$api.tell(item.phone)" class="tell_phone"></div> -->
                </div>
            </mt-index-section>
        </mt-index-list>
    </div>
    
</template>

<script>
    import {
        MessageBox
    } from 'mint-ui';
    export default {
        data() {
            return {
                useInfo: '',
                markType: null, //存储签到还是签退,0为签到,1为签退
                showData: [],
            }
        },
        methods: {
            getUserInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            },
            getMarkType() {
                this.markType = sessionStorage.getItem('markType');
                console.log(this.markType);
            },
            getInfo() { //
                var url = "/student/selectPageWithParam"
                var params = {
                    pageNum: 1,
                    pageSize: 10,
                    schoolId: this.useInfo.schoolId,
                }
                this.$api.post(url, params, (data) => {
                    console.log(JSON.parse(JSON.stringify(data)))
                    this.showData = data.info.list;
                })
            },
        },
        computed: {
            siteData: function() {
                var array = [];
                let AllZiMu = this.showData.map(x => { //从 showData里面提取以sortName为子对象的数组
                    return x.sortName
                })
                AllZiMu = AllZiMu.filter((element, index, self) => { //过滤相同子节点
                    return self.indexOf(element) === index;
                })
                return AllZiMu;
                // this.showData.forEach(element => {


                // });
            },
        },
        created() {
            this.getUserInfo();
            this.getMarkType();
            this.getInfo();
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .select_class .mint-navbar {
        background: white;
        color: #A5A5A5;
    }
    
    .select_class .mint-navbar .mint-tab-item.is-selected {
        border-bottom: 0.1rem solid #74beff;
        color: #0489ff;
        margin-bottom: 0px;
    }
</style>